<template>
    <div class="dialog-wrapper">
        <Modal
                :title="title"
                footer-hide
                :value="value"
                @on-cancel="handleCancel">
            <Form
                    ref="form"
                    :model="form"
                    :rules="rules"
                    :label-width="120">
                <FormItem :label="this.$t('m.picture')" prop="imgUrl">
                    <div class="priview" v-if="form.imgUrl">
                        <img :src="form.imgUrl" alt="" class="priview-image">
                    </div>
                    <Upload
                            ref="upload"
                            :format="['jpg','jpeg','png']"
                            accept="image/jpeg,image/png"
                            action=""
                            :show-upload-list="false"
                            :before-upload="handleBeforeUpload"
                    >
                        <Button icon="ios-cloud-upload-outline" :loading="btnLoading">{{$t('m.scImg')}}</Button>
                    </Upload>
                </FormItem>
                <FormItem :label="this.$t('m.title')"  prop="name">
                    <Input v-model="form.name" type="text" placeholder="请输入标题" :disabled="type === 'u'" />
                </FormItem>
                <FormItem :label="this.$t('m.linkurl')" prop="linkUrl">
                    <Input v-model="form.linkUrl" type="text" placeholder="请输入链接" prop="linUrl"/>
                </FormItem>
                <FormItem :label="this.$t('m.shunxu')"  prop="sort">
                    <Input v-model="form.sort" type="text" placeholder="请输入顺序" number />
                </FormItem>
                <FormItem :label="this.$t('m.dlqdId')" prop="dcIdRule">
                    <Input v-model="form.dcId" type="text" placeholder="请输入导流渠道ID" number />
                </FormItem>
                <FormItem :label="this.$t('m.sfZahnshi')"  prop="status">
                    <RadioGroup v-model="form.status">
                        <Radio :label="1">{{$t('m.zs')}}</Radio>
                        <Radio :label="0">{{$t('m.nzs')}}</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem :label="'打开方式'">
                    <RadioGroup v-model="form.openType">
                        <Radio :label="'in'">Open in App</Radio>
                        <Radio :label="'out'">Open in browser</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem :label="this.$t('m.remarkCo')"  prop="desc">
                    <Input v-model="form.remark" type="textarea" placeholder="请输入备注" />
                </FormItem>
                <FormItem>
                    <Button type="primary"  @click="handleSubmit" :loading="btnLoading" >提交</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import qs from 'qs';
    export default {
        btnLoading:false,
        name: 'userInfo',
        props: {
            title: String,
            type: String,
            value: {
                type: Boolean,
                default: false
            },
            formData: {
                type: Object,
                default: {
                    img: '',
                    name: '',
                    link: '',
                    sort: '',
                    status: '',
                    type: '',
                    dcId: '',
                    desc: ''
                }
            }
        },
        data () {
            const validateNumber = (rule, value, callback) => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字'));
                } {
                    callback();
                }
            }
            return {
                idFlag: false,
                btnLoading: false,
                imgs: '',
                form: {
                    imgUrl: '',
                },
                dcIdRule: [
                    { type: 'number', required: true, message: '请输入数字', trigger: 'blur' },
                    { validator: validateNumber, trigger: 'blur' }
                ],
                rules: {
                    imgUrl: [
                        { required: true, message: '请上传图片', trigger: 'change' }
                    ],
                    name: [
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ],
                    linkUrl: [
                        { required: true, message: '请输入链接', trigger: 'blur' }
                    ],
                    sort: [
                        { type: 'number', required: true, message: '请输入数字', trigger: 'blur' },
                        { validator: validateNumber, trigger: 'blur' }
                    ],
                    status: [
                        { required: true, type: 'number', message: '请选择是否展示', trigger: 'change' }
                    ],
                    remark: [
                        { required: true, message: '请输入备注', trigger: 'blur' }
                    ]
                }
            }
        },
        watch: {
            value (newValue) {
                if (newValue) {
                    this.form = this.formData;
                }
            },
            'form.type' (newVal) {
                if (newVal === 'diversion') {
                    this.idFlag = true;
                    this.rules.dcId =  this.dcIdRule;
                } else {
                    this.idFlag = false;
                    this.rules.dcId = [];
                }
            }
        },
        methods: {
            // 图片上传前的钩子函数
            handleBeforeUpload (file) {
                const reg = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;

                if (!reg.test(file.type)) return this.$Message.error('只能上传jpg, jpeg, png格式的图片');
                if (this.imgs.length > 1) return this.$Message.error('只能上传1张图片');
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = (e) => {
                    let result = e.target.result;

                    this.form.imgUrl = result
                }

                reader.onerror = (e) => {
                    this.$Message.error('图片转成base64错误');
                }

                return false;
            },
            uploadImage (value) {
                this.btnLoading = true;
                this.$http.post('/helsinki/admin/basic/uploadImgs', qs.stringify({
                    imgs: value
                }))
                    .then(({ data: { errcode, info, data } }) => {
                        if (errcode == 0) {
                            this.$Message.success('上传图片成功');
                            this.form.img = data[0];
                        }
                        this.btnLoading = false;
                    }, error => {
                        this.btnLoading = false;
                    });
            },
            // 表单提交
            handleSubmit () {
                this.btnLoading = true
                const { form } = this.$refs;
                form.validate(valid => {
                    if (valid) {
                        if (this.form.type === 'update') { this.form.dcId = '' };
                        this.$http.post(`/api/laocai/sys/banner/${this.type}`, {
                            ...this.form
                        }).then((res) => {
                            if (res.body.code == 0) {
                                this.btnLoading = false
                                let message = this.type == 'a' ? '添加banner成功' : '编辑banner成功';
                                this.$Message.success(message);
                                this.$emit('ok');
                                this.$router.push('/blank')
                            }else {
                                this.btnLoading = false
                                this.$Message.warning(res.body.message);
                            }
                        });
                    }
                })
            },
            handleCancel () {
                this.$refs.form.resetFields();
                this.$emit('input', false);
            }
        }
    }
</script>

<style lang="scss">
    .ivu-form .ivu-form-item-label {
        margin-bottom: 0;
    }

    .ivu-radio-wrapper {
        margin-bottom: 0;
    }

    .priview {
        margin-bottom: 10px;
        .priview-image {
            max-height: 60px;
        }
    }
</style>
